<template>
  <div id="pay-success">
    <!--页面顶部-->
    <div id="nav-bottom">
      <!--顶部-->
      <div class="nav-top">
        <div class="top">
          <div class="py-container">
            <div class="shortcut">
              <ul class="fl">
                <li class="f-item">青橙欢迎您！</li>
                <li class="f-item">
                  请<a href="login.html" target="_blank">登录</a> <span><a href="register.html" target="_blank">免费注册</a></span>
                </li>
              </ul>
              <div class="fr typelist">
                <ul class="types">
                  <li class="f-item"><span>我的订单</span></li>

                  <li class="f-item">
                    <span><a href="cart.html" target="_blank">我的购物车</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="home.html" target="_blank">我的青橙</a></span>
                  </li>
                  <li class="f-item"><span>青橙会员</span></li>
                  <li class="f-item"><span>企业采购</span></li>
                  <li class="f-item"><span>关注青橙</span></li>
                  <li class="f-item">
                    <span><a href="cooperation.html" target="_blank">合作招商</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="shoplogin.html" target="_blank">商家后台</a></span>
                  </li>
                  <li class="f-item"><span>网站导航</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!--头部-->
        <div class="header">
          <div class="py-container">
            <div class="yui3-g Logo">
              <div class="yui3-u Left logoArea">
                <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
              </div>
              <div class="yui3-u Rit searchArea">
                <div class="search">
                  <form action="" class="sui-form form-inline">
                    <!--searchAutoComplete-->
                    <div class="input-append">
                      <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                      <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cart py-container">
      <!--主内容-->
      <div class="paysuccess">
        <div class="success">
          <h3><img src="img/_/right.png" width="48" height="48" /> 恭喜您，支付成功啦！</h3>
          <div class="paydetail">
            <p>支付方式：支付宝</p>
            <p>支付金额：￥1006.00元</p>
            <p class="button">
              <a href="myOrder.html" class="sui-btn btn-danger btn-xlarge">查看订单</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html" class="sui-btn btn-xlarge btn-goshop">继续购物</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
      <div class="py-container">
        <div class="footlink">
          <div class="Mod-service">
            <ul class="Mod-Service-list">
              <li class="grid-service-item intro  intro1">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro2">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro  intro3">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro4">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro intro5">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clearfix Mod-list">
            <div class="yui3-g">
              <div class="yui3-u-1-6">
                <h4>购物指南</h4>
                <ul class="unstyled">
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>生活旅行/团购</li>
                  <li>常见问题</li>
                  <li>购物指南</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>配送方式</h4>
                <ul class="unstyled">
                  <li>上门自提</li>
                  <li>211限时达</li>
                  <li>配送服务查询</li>
                  <li>配送费收取标准</li>
                  <li>海外配送</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>支付方式</h4>
                <ul class="unstyled">
                  <li>货到付款</li>
                  <li>在线支付</li>
                  <li>分期付款</li>
                  <li>邮局汇款</li>
                  <li>公司转账</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>售后服务</h4>
                <ul class="unstyled">
                  <li>售后政策</li>
                  <li>价格保护</li>
                  <li>退款说明</li>
                  <li>返修/退换货</li>
                  <li>取消订单</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>特色服务</h4>
                <ul class="unstyled">
                  <li>夺宝岛</li>
                  <li>DIY装机</li>
                  <li>延保服务</li>
                  <li>品优购E卡</li>
                  <li>品优购通信</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>帮助中心</h4>
                <img src="img/wx_cz.jpg" />
              </div>
            </div>
          </div>
          <div class="Mod-copyright">
            <ul class="helpLink">
              <li>关于我们<span class="space"></span></li>
              <li>联系我们<span class="space"></span></li>
              <li>关于我们<span class="space"></span></li>
              <li>商家入驻<span class="space"></span></li>
              <li>营销中心<span class="space"></span></li>
              <li>友情链接<span class="space"></span></li>
              <li>关于我们<span class="space"></span></li>
              <li>营销中心<span class="space"></span></li>
              <li>友情链接<span class="space"></span></li>
              <li>关于我们</li>
            </ul>
            <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
            <p>京ICP备08001421号京公网安备110108007702</p>
          </div>
        </div>
      </div>
    </div>
    <!--页面底部END-->
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  created() {}
}
</script>

<style lang="less">
a {
  color: #666;
}
#pay-success {
  .col666 {
    color: #999;
  }

  .fontSize {
    font-size: 18px;
    color: #ff3041;
  }

  .top {
    background-color: #f1f1f1;
  }

  .logoArea {
    overflow: hidden;
    position: relative;
  }

  .logo {
    background: url(../../public/img/icons.png) no-repeat;
    background-position: -370px 3px;
    width: 177px;
    height: 75px;
  }

  .logo .title {
    font: 19px '微软雅黑';
    position: absolute;
    top: 24px;
    left: 190px;
  }

  .paysuccess {
    padding: 25px;
    margin: 20px 0;
    border: 1px solid #ddd;
    font-family: '微软雅黑';
  }

  .paysuccess .success {
    width: 500px;
    margin: 0 auto;
  }

  .success h3 {
    margin: 20px 0;
    font-weight: 700;
    font-size: 20px;
  }

  .success .paydetail {
    margin-left: 66px;
    font-size: 15px;
  }

  .paydetail p {
    line-height: 26px;
  }

  p.button {
    margin: 30px 0;
  }

  .paydetail .sui-btn.btn-xlarge {
    font-size: 18px;
    background-color: #ff4301;
    border: 1px solid #ff4301;
  }

  .paydetail .sui-btn.btn-goshop {
    background-color: #eee;
    border: 1px solid #e1e1e1;
  }

  .submit {
    text-align: center;
  }

  .submit .btn-submit {
    width: 220px;
    height: 48px;
    line-height: 48px;
    margin-right: 10px;
    padding: 0;
    font-family: 'Microsoft YaHei';
    font-size: 18px;
  }

  .recharge {
    padding-left: 100px;
    padding-right: 100px;
  }

  .rechargeCon {
    width: 500px;
    margin: 0 auto;
  }

  .rechargeCon h3 {
    padding: 0 0 15px;
  }

  .rechargeCon p label {
    display: inline-block;
    width: 100px;
    text-align: right;
    float: left;
  }

  .rechargeCon p {
    padding: 5px 0;
    font-size: 14px;
  }

  .rechargeCon .textR {
    display: block;
    margin-left: 110px;
  }

  .rechargeCon .textR .Info {
    border: 1px solid #ccc;
    display: inline-block;
    width: 60px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 15px;
    margin-right: 8px;
    cursor: pointer;
  }

  .rechargeCon .textR .Info.on {
    border: 1px solid #ff4301;
    position: relative;
  }

  .rechargeCon .textR .Info.on em {
    background: url(../../public/img/choosed.png) no-repeat;
    width: 14px;
    height: 15px;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }

  .inputInfo {
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    width: 200px;
  }
}
</style>
